{% extends "./template.html" %}

{% block body %}
<div class="pb-3 pt-3 fixed-top" style="background: #fff;">
    <div class="container">
        <a href="/?user_id={{user_id}}" class="btn btn-sm btn-outline-info">回首页</a>
        <a href="/tags?user_id={{user_id}}" class="ml-2 btn btn-sm btn-success">标签管理</a>
        <a href="/articles?user_id={{user_id}}" class="ml-2 btn btn-sm btn-warning">文章管理</a>
    </div>
</div>
<div class="d-flex justify-content-center" id="alert-box">
    <div class="alert d-none" id="alert" style="width:30%">
        <h6 class="alert-heading">提示</h6>
        <p class="alert-body"></p>
    </div>
</div>
<div class="pt-5">
<div class="text-center mb-5">
    <h4>发布文章</h4>
</div>
<form>
    <div class="form-group">
        <label for="title">标题</label>
        <input type="text" class="form-control" id="title">
    </div>
    <div class="form-group">
        <div class="d-flex">
            标签：
            {% if tags.length>0 %}
            {% for tag in tags %}
            <div class="form-check form-check-inline">
                <input class="form-check-input" data-id="{{tag.id}}" type="radio" id="radio-{{tag.id}}" name="tag_id">
                <label class="form-check-label" for="radio-{{tag.id}}">{{tag.title}}</label>
            </div>
            {% endfor %}
            {% else %}
            <a href="/tags?user_id={{user_id}}" id="add-btn" class="btn btn-sm btn-outline-primary">新增标签</a>
            {% endif %}
        </div>
    </div>
    <div class="form-group">
        <div id="editor">
            <textarea style="display:none;">### 随便写点什么吧... !</textarea>
        </div>
    </div>
    <button type="button" class="btn btn-primary" id="post-btn">提交</button>
</form>
</div>
{% endblock %}

{% block script %}
<script src="editor.md/editormd.min.js"></script>
<script src="script/index.js"></script>
<script type="module">
    window.onload = () => {
        var editor = editormd("editor", {
            placeholder: "随便写点什么吧...",
            height: "600px",
            path: "editor.md/lib/",
            watch: false
        });
        var tag_id = ''
        const checks = document.querySelectorAll('.form-check-input');
        checks.forEach(el => {
            el.addEventListener('click', (e) => {
                if (e.target.value == 'on') {
                    tag_id = e.target.dataset.id;
                }
            })
        })
        let postBtn = document.querySelector('#post-btn');

        postBtn.addEventListener('click', () => {
            let content = editor.getMarkdown();
            let title = document.querySelector('#title').value;
            if (title == '') {
                checkMsg({ msg: '标题不能为空', type: 'danger' })
                return;
            }
            if (tag_id == '') {
                checkMsg({ msg: '标签不能为空', type: 'danger' })
                return;
            }
            let article = {
                title,
                content,
                tag_id: tag_id,
                user_id: '{{user_id}}'
            };
            let token = localStorage.getItem('token');
            $.ajax({
                headers: {
                    'Authorization': token
                },
                type: 'POST',
                url: `/api/article`,
                data: article,
                success: (res) => {
                    if (res.status == 401) {
                    
                        checkMsg({ msg: res.msg, type: 'warning' }, () => {
                            window.location = '/login'
                        })
                    } else {
                        checkMsg({ msg: '发布成功', type: 'success' }, () => {
                            window.location = '/?user_id={{user_id}}'
                        })
                    }
                }
            })



        })


    }
</script>
{% endblock %}